<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<div id="app">
		<!-- 事件中直接写js片段 -->
		<button v-on:click="num++">点赞</button>
		<!-- 事件执行一个回调函数，必须是Vue实例中定义的函数 -->
		<button @click="cancle">取消</button>
		<h1>有{{num}}个赞</h1>


		<!-- 事件修饰符 -->
		<div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
			大div <br>
			<div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
				小div <br>
				<a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
			</div>
		</div>

		<!-- 按键修饰符 -->
		<input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10" /><br>
		提示：

	</div>


	<script src="../node_modules/vue/dist/vue.js"></script>
	<script type="text/javascript">
		let vm = new Vue({
			el: "#app",
			data: {
				num: 1
			},
			methods: {
				cancle() {
					this.num--;
				},
				hello() {
					alert("hello");
				}
			}
		});
	</script>
</body>

</html>